<template>
	<view class="">
		<heardSeach @emitParmas="seach" />
		<van-empty description="暂无数据" v-if="props.info.length===0" /> 
		<view class="info-box" v-for="(item,index) in props.info" :key="index">

			<view class="tab-box">
				<view class="tab-item-heard tab-item-4">
					<text>{{item.type_name}}</text>
				</view>
				<view class="c-row">
					<view class="c-col-6" v-for="(items,indexs) in item.log_data" :key="indexs">
						<view class="day-item item-active">
							<text class="day-item-text1 ">{{items.grade_type_name}}</text>
							<text class="day-item-text2">{{items.hour}}小时</text>
						</view>
					</view>

				</view>
			</view>


		</view>
	</view>
</template>

<script setup>
	import heardSeach from "../../../../components/heardSeach/index.vue";
	import {
		ref
	} from 'vue';
	const props = defineProps({
		info: {
			type: Object,
			default: () => {
				return []
			}
		},
	})
	const emit = defineEmits(['emitDate'])
	const seach = (data) => { 
		emit('emitDate', data)
	} 
</script>

<style lang="scss" scoped>
	
 .info-box {
 		display: flex;
 		align-items: center;
 		flex-direction: column;
 		padding: 24rpx 40rpx; 
 		width: 100vw;
 	} 
   
 	.item {
 		display: flex;
 		align-items: center; 
 
 		.item-text1 {
 			font-size: 32rpx;
 			line-height: 36rpx;
 		}
 
 		.item-text2 {
 			font-size: 32rpx;
 			line-height: 36rpx;
 			margin-left: 30rpx;
 		}
 	}
 
 	.view {
 		margin-bottom: 40rpx;
 	}
 
 	.tab-box {
 		display: flex;
 		flex-direction: column;
 		width: 100%;
 	}
 
 	.tab-item-heard {
 		display: flex;
 		align-items: center;
 		width: 100%;
 		height: 60rpx;
 		opacity: 1;
 		border-radius: 8.76px;
 		padding: 0 30rpx;
 margin-top: 42rpx;
 		text {
 			font-size: 32rpx;
 			color: #fff;
 		}
 	}
 
 	.tab-item-1 {
 		background: linear-gradient(90deg, rgba(172, 51, 193, 1) 0%, rgba(204, 204, 204, 0) 100%);
 	}
 
 	.tab-item-2 {
 		background: linear-gradient(90deg, rgba(42, 130, 228, 1) 0%, rgba(204, 204, 204, 0) 100%);
 	}
 
 	.tab-item-3 {
 		background: linear-gradient(90deg, rgba(0, 186, 173, 1) 0%, rgba(204, 204, 204, 0) 100%);
 	}
 	.tab-item-4{
 		background: linear-gradient(90deg, rgba(121, 72, 234, 1) 0%, rgba(121, 72, 234, 0) 100%);
 
 		
 	}
 	.remask{
 		padding:0 30rpx;
 		width: 100%;
 		margin-top: 30rpx;
 		text-align: justify;
 	}
	.info-box {
		padding-bottom: 0rpx;
	}

	.view {
		margin: 0 auto;
		// margin-top: 30rpx;
		width: calc(100%);
	}

	.view {
		margin-bottom: 0;
		margin-top: 30rpx;
	}

	.tab-item-heard {
		margin-top: 0px;
	}

	.tab-box {
		margin-bottom: 30rpx;
	}

	.day-item-text1 {
		/** 文本1 */
		font-size: 24rpx;
		font-weight: 700;
		letter-spacing: 0px;
		line-height: 30.46rpx;
		color: rgba(255, 255, 255, 1);


	}

	.day-item-text2 {
		font-size: 24rpx;
		letter-spacing: 0px;
		line-height: 30.46rpx;
		color: rgba(102, 102, 102, 1);
		margin-top: 10rpx;
		font-weight: 700;
	}

	.day-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20rpx 10rpx;
		width: 100%;
		height: 130rpx;
		border-radius: 8.76px;
		background: rgba(229, 229, 229, 1);

		.day-item-text1 {
			color: rgba(102, 102, 102, 1);
		}
	}

	.item-active {
		background: linear-gradient(90deg, rgba(26, 173, 164, 1) 0%, rgba(8, 207, 193, 1) 100%);

		.day-item-text1 {
			color: rgba(255, 255, 255, 1);
		}

		.day-item-text2 {
			color: #fff;

		}
	}
</style>